<template>
  <div class="about">
    <!-- 从基础组件中随机引入3-5个组件在关于进行显示 -->
    <table class="demo-border">
      <tbody>
        <tr>
          <td class="text">Name</td>
          <td class="text">Thickness</td>
          <td class="line">Demo</td>
        </tr>
        <tr>
          <td class="text">Solid</td>
          <td class="text">1px</td>
          <td class="line">
            <div />
          </td>
        </tr>
        <tr>
          <td class="text">Dashed</td>
          <td class="text">2px</td>
          <td class="line">
            <div class="dashed" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.demo-border .text {
  width: 15%;
}
.demo-border .line {
  width: 70%;
}
.demo-border .line div {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color);
}
.demo-border .line .dashed {
  border-top: 2px dashed var(--el-border-color);
}
</style>